<template>
  <div
    class="container"
    :style="{
      width: `${width}px`,
      height: `${height}px`,
      opacity,
      transform: `translate(${px2vw(moveX)},${px2vw(moveY)}) scale(${sX},${sY})`,
    }"
    v-if="show"
  >
    <img :src="src" alt="商品" />
  </div>
</template>

<script>
export default {
  methods: {
    px2vw(px) {
      return `${(px / window.screen.width) * 100}vw`;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/css/globel.scss";
.container {
  @include fixed(0, 0, 99);
  transition: all 1s;
  transform-origin: 0 -10%;
  img {
    width: 100%;
    border-radius: 50%;
  }
}
</style>
